import { Component } from 'react'
import { Route } from 'react-router-dom'
import axios from 'axios'

function fn(Com, url) {
    return class NewCom extends Component {
        state = {
            list: []
        }
        render() {
            const { list } = this.state
            return <div>
                <Com list={list} />
            </div>
        }
        componentDidMount() {
            axios.get(url).then(res => {
                this.setState({
                    list: res.data.list
                })
            })
        }
    }
}

function dragFn(Com) {
    return class NewCom extends Component {
        state = {
            top: 50,
            left: 50
        }

        onMouseMove = (ev) => {
            this.setState({
                top: ev.clientY,
                left: ev.clientX
            })
        }

        onMouseDown = () => {
            document.addEventListener('mousemove', this.onMouseMove)

            document.addEventListener('mouseup', () => {
                document.removeEventListener('mousemove', this.onMouseMove)
            })
        }
        render() {
            const { top, left } = this.state
            return <div className="pab" onMouseDown={() => {
                this.onMouseDown()
            }} style={{
                top,
                left
            }}>
                <Com />
            </div>
        }
    }
}



// 模拟withRouter
function myWith(Com) {
    return class NewCom extends Component {
        render() {
            return <Route component = { Com }/>
        }
    }
}

export {
    fn,
    dragFn,
    myWith
}
